<script>


import FriendInfo from "@/components/view/littleview/FriendInfo.vue";
import FriendPhoto from "@/components/view/littleview/FriendPhoto.vue";
import FriendDynamic from "@/components/view/littleview/FriendDynamic.vue";
import FriendMessage from "@/components/view/littleview/FriendMessage.vue";
import FriendMusic from "@/components/view/littleview/FriendMusic.vue";

export default {
  name: "FriendData",
  components: {FriendMusic, FriendMessage, FriendDynamic, FriendPhoto, FriendInfo},
  props:['id'],
  data() {
    return {
      menu: 0,
    }
  },
  methods:{
    setMenu(i) {
      this.menu = i;
    }
  }
}
</script>

<template>
  <el-row class="tac" style="background-color:#ffffff;margin-top: 10px; border-radius: 5px">
    <el-col :span="3">
      <el-menu
          :default-active="menu+''">
        <el-menu-item index="0" @click.native="menu = 0">
          <i class="el-icon-user"></i>
          <span slot="title">个人资料</span>
        </el-menu-item>
        <el-menu-item index="1" class="my_icon" @click.native="menu=1">
          <i class="iconfont icon-xiangce"></i>
          <span slot="title">个人相册</span>
        </el-menu-item>
        <el-menu-item index="2" class="my_icon" @click.native="menu=2">
          <i class="iconfont icon-fenxiang"></i>
          <span slot="title">个人动态</span>
        </el-menu-item>
        <el-menu-item index="3" @click.native="menu=3">
          <i class="el-icon-document"></i>
          <span slot="title">留言板</span>
        </el-menu-item>
        <el-menu-item index="4" @click.native="menu=4">
          <i class="el-icon-headset"></i>
          <span slot="title">音乐</span>
        </el-menu-item>
      </el-menu>
    </el-col>
    <el-col :span="21">
      <div class="zy_cont">
        <friend-info v-if="menu===0" :id="id" @set="setMenu"></friend-info>
        <friend-photo v-else-if="menu===1" :id="id"></friend-photo>
        <friend-dynamic v-else-if="menu===2" :id="id"></friend-dynamic>
        <friend-message v-else-if="menu===3" :id="id"></friend-message>
        <friend-music v-else-if="menu===4" :id="id"></friend-music>
      </div>
    </el-col>
  </el-row>

</template>

<style scoped>
.zy_cont {
  height: 350px;
  padding: 5px 0;
  overflow: auto;
}
</style>